<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>后台用户管理</title>
<%@include file="/WEB-INF/base.jspf"%>
  <style type="text/css">
  	.body_wrapper{
  		height: 100%;
  		width: 100%;
  		box-sizing: border-box;
  		padding: 0px 20px;
  	}
	 	.p-c-flexwrapper {
	    width: 49%;
		display:inline;
		align-items:center;
		margin-right:16px;
		margin-bottom:32px;
		
	}
	.p-c-flexwrapper > span {
		width:80px;
	}
		.modal-dialog {
		max-width: 1000px;
	}
	.p-c-flexwrapper > .form-control {
		width:180px;
	}
	.input-auto {
		width:auto;
		display: inline;
		margin-bottom: 20px;
	}
	 
 	table th,table tr,table td {
	text-align: center;
	vertical-align:middle;
	}
	
  </style>
</head>
<body>
	<div class="body_wrapper">
		<div class="wrapper_buttons">
			<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#addAndEditModal">新增</button>
			<div class="shezhileiContent" style="display: none;">
				<ul class="" >
				   <li><input type="checkbox" value="0" checked="checked" /> <span>用户账号</span></li>
				   <li><input type="checkbox"  value="1" checked="checked" /> <span>组别</span></li>
				   <li><input type="checkbox"  value="2" checked="checked" /> <span>状态</span></li>
				   <li><input type="checkbox"  value="3" checked="checked" /> <span>操作</span></li>
				</ul>
 			</div>
		</div>
		
		<table id="table_id_example" class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th style="display: none;"></th>
							<th>用户序号</th>
							<th>用户昵称</th>
							<th>用户帐号</th>
							<th>用户类型</th>
							<th>用户IP</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${user}" var="emp" varStatus="statu">
						  <tr class="">
							<td style="display: none;" class="id-td">${emp.id}</td>
							<td>${statu.index + 1}</td>
							<td class="nick_name-td">${emp.nick_name}</td>
							<td class="yonghuming-td">${emp.name}</td>
							<td class="admin_type-td">
							<c:if test="${emp.admin_type==0}"> 管理员</c:if>
							<c:if test="${emp.admin_type==4}"> 超级管理员</c:if>
							</td>
							<td class="td-ipaddress">${emp.ip}</td>
							<td class="td-btnGrounpWrapper">
							<c:if test="${emp.state=='1'}">
								<button data-state="${emp.state}" class="btn-control-startOrBan btn btn-primary">禁用</button>   <button class="btn btn-info btn-edit-userInfo">修改</button> 
								 <button data-id="${emp.id}" class="btn btn-default btn-delete-userInfo">删除</button>
							</c:if>
							<c:if test="${emp.state=='0'}">
								<button data-state="${emp.state}" class="btn-control-startOrBan btn btn-success">启用</button>  <button class="btn btn-info btn-edit-userInfo">修改</button> 
								 <button data-id="${emp.id}" class="btn btn-default btn-delete-userInfo">删除</button>
							</c:if>	
							</td>						
						</tr>
						</c:forEach>
					</tbody>
				</table>
		</div>
 
			<!--新增模态框开始-->
			<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    	<div class="modal-dialog">
		       		 <div class="modal-content">
					    <div class="modal-header" style="height: 10px;">
							<span style="float: left; font-size:13px;margin-top: -10px;">添加管理员 </span>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">&times;</button>
							</div>
					            <div class="modal-body">
					            	<p class="p-c-flexwrapper"><span>用户昵称：</span><input id="obj-nick_name" class="form-control input-auto"></p>
					            	<p class="p-c-flexwrapper"><span>用户帐号：</span><input id="obj-name" class="form-control input-auto"></p>
					            	<p class="p-c-flexwrapper"><span>用户密码：</span><input id="obj-pass" class="form-control input-auto"></p>
					            	<p class="p-c-flexwrapper"><span>IP&nbsp;&nbsp;&nbsp;地址： </span><input id="obj-ip" class="form-control input-auto"></p>
				            </div>
					            
				             <div class="modal-footer">
				                <button type="button" class="btn btn-primary" id="id-input-addAndEditAJAXBtn">提交</button>
				                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			           		 </div>
						</div>
					</div>
				</div>	
					
		<!-- 模态框（Modal） -->
			 	<div class="modal fade" id="editPassWord" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		          <div class="modal-header" style="height: 10px;">
					<span style="float: left; font-size:13px;margin-top: -10px;">修改资料</span>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">&times;</button>
				</div>
		            <div class="modal-body">
	            		<input id="update-id" style="display: none;">
	            		<p class="p-c-flexwrapper"><span>用户昵称：</span><input id="update-nick_name" class="form-control input-auto"></p>
		            	<p class="p-c-flexwrapper"><span>用户密码：</span><input id="update-pass" class="form-control input-auto" placeholder="请输入新密码"></p>
		            	<p class="p-c-flexwrapper"><span>IP&nbsp;&nbsp;&nbsp;地址： </span><input id="update-ip" class="form-control input-auto"></p>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitUpdateKefu">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div>
		     </div>
		  </div>
		  
		  <!-- 模态框（Modal） -->
	 	<div class="modal fade" id=noticeModal tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" 
	 	style="display:aboslute;left:40%;top:10%;">
		        <div class="modal-content" style="width:35%;">
		          <div class="modal-header" style="height: 10px;">
					<span style="float: left; font-size:13px;margin-top: -10px;">信息提示</span>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">&times;</button>
					</div>
		            <div class="modal-body" style="height:100px; text-align: center;">
		            </div>
		        </div>
	     </div>
<script>

	function  dataTable01(){
				$("#table_id_example").DataTable({
			      // "bPaginate": true,
			      "bLengthChange": true,      
			      "bSort": false,
			      // "bInfo": true,
			      "bAutoWidth": false,
	//		         "bServerSide":true,
			      'aLengthMenu':[5, 10, 20],
			       "searching": true, 
			       "dom": "t<'tableinfo'i<'tableSearch'p>l>",
	//		    "searching": true,l
			       "language": {//语言设置  
			            "lengthMenu": "每页显示 _MENU_ 条记录",     
			            "zeroRecords": "没有检索到数据",     
			            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
			            "info": "没有数据",     
			            "oPaginate": {     
			                "sFirst": "首页",     
			                "sPrevious": "前一页",     
			                "sNext": "后一页",     
			                "sLast": "尾页"    
			          	},
			            "search":"",
			            "searchPlaceholder": "请输入关键字",
			            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
			            "infoEmpty":      "没有找到匹配的信息",
			         }
			    })
			}
		 dataTable01();
		 insertSearchBtn()
		 var id = 0;
			$("#table_id_example").on("click", function(event) {
				var $Event = $(event.target)
				var $Parent = $Event.closest("tr")
				if ($Event.hasClass("btn-control-startOrBan")) {
					var urlPath ="/kajhsgweasdqtwehghasfdnsak6868/updateAdminUserState.do"
					var stateValue = event.target.dataset.state
					var newRequest = {
						url: urlPath,
						type: "post",
						data: {
							name: $Parent.find(".yonghuming-td").text(),
							state: stateValue,
						},
						success: function(data) {
							var newData = JSON.parse(data)
							if (stateValue == "1") {
								event.target.dataset.state = "0"
								$Event.removeClass("btn-primary").addClass("btn-success").text("启用")
							} else {
								event.target.dataset.state = "1"
								$Event.removeClass("btn-success").addClass("btn-primary").text("禁用")
							}
						},
						error: function(status) {
							console.log("status", status)
						}
					}
					ajax(newRequest)					
				}
				else if ($Event.hasClass("btn-edit-userInfo")) {
					$("#update-id").val($Parent.find(".id-td").text())
					$("#update-nick_name").val($Parent.find(".nick_name-td").text())
					$("#update-ip").val($Parent.find(".td-ipaddress").text())
					$("#editPassWord").modal("show")
				}
			})		
			$("#id-input-addAndEditAJAXBtn").click(function(event) {
				switch(""){
					case $("#obj-nick_name").val():
						showNoticeModal("请填写完整信息");
						return ;
					case $("#obj-name").val():
						showNoticeModal("请填写完整信息");
					case $("#obj-pass").val():
						showNoticeModal("请填写完整信息");
						return ;
					case $("#obj-ip").val():
						showNoticeModal("请填写完整信息");
						return ;
			}
				var result = checkPassWordValid($("#obj-pass").val())
				if (result != "ok") {
					showNoticeModal(result)
					return
				} 
				var ipValid = isValidIP($("#obj-ip").val())
				if (!ipValid) {
					alert("IP地址格式有误")
					return
				}
				var urlPath = "/kajhsgweasdqtwehghasfdnsak6868/addAdminUser.do"
				var newRequest = {
					url: urlPath,
					type: "post",
					data: 
						{
						nick_name:$("#obj-nick_name").val(),
						name: $("#obj-name").val(),
						pass: $("#obj-pass").val(),
						ip:$("#obj-ip").val(),
						admin_type:0
						},
					success: function(data) {
						var newData = JSON.parse(data)
						alert(newData.data)
						location.reload()
					},
					error: function(status) {
						console.log("status", status)
					}
				}
				ajax(newRequest)				
			})
			$("#button-i-submitUpdateKefu").on("click", function(event) {
				switch(""){
					case $("#update-nick_name").val():
						showNoticeModal("请填写完整信息");
						return ;
					case $("#update-ip").val():
						showNoticeModal("请填写完整信息");
						return ;
				}
				if($("#update-pass").val()!=''){
					var result = checkPassWordValid($("#update-pass").val())
					if (result != "ok") {
						showNoticeModal(result)
						return
					} 
				}
				var ipValid = isValidIP($("#update-ip").val())
				if (!ipValid) {
					showNoticeModal("IP地址格式有误")
					return
				} 
				var urlPath = "/kajhsgweasdqtwehghasfdnsak6868/updateAdminUser.do"
					var newRequest = {
						url: urlPath,
						type: "post",
						data: {
							id: $("#update-id").val(),
							nick_name: $("#update-nick_name").val(),
							pass: $("#update-pass").val(),
							ip: $("#update-ip").val()
						},
						success: function(data) {
							var newData = JSON.parse(data)
							$("#editPassWord").modal("hide")
							alert(newData.data)
							location.reload()
						},
						error: function(status) {
							console.log("status", status)
						}
					}
					ajax(newRequest)		
			})
			
			$(".btn-delete-userInfo").on("click", function(event) {
				var btn = $(event.target);
				var urlPath = "/kajhsgweasdqtwehghasfdnsak6868/deleteAdminUser.do"
					var newRequest = {
						url: urlPath,
						type: "post",
						data: {
							id: btn.data("id")
						},
						success: function(data) {
							var newData = JSON.parse(data)
							alert(newData.data)
							location.reload()
						},
						error: function(status) {
							console.log("status", status)
						}
					}
					ajax(newRequest)	
			})
</script> 
</body>
</html>